<template>
  <div class="home">
    <div class="header" v-if="sort">
      <el-dropdown :trigger="['click']">
        <!-- <div class="add_mode" :class="{ none_mode: dataArr.length == 0 }">添加模块</div> -->
        <el-button type="primary">{{ $t("home.addModule") }}</el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item v-for="(e, i) in dataArr" :key="i">
              <div class="flex flex-align-center pointer" @click="chooseItem(e, i)">{{ e.title }}</div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <div class="tip_sort_box">
        <span>{{ $t("home.dragTip") }}</span>
        <div class="sort_finish" @click="onFinish">{{ $t("home.finish") }}</div>
      </div>
    </div>
    <div class="grid-box">
      <div class="left-box">
        <draggable
          class="grid-container"
          handle=".handle"
          v-model="grid1List"
          item-key="type"
          animation="300"
          chosen-class="chosen"
          group="people"
          @change="draggableChange"
        >
          <template #item="{ element }">
            <div class="item" :class="'item-' + element.type">
              <div class="item-title-box handle">
                <div class="item-title">{{ element.title }}</div>
                <!-- 移除模块 -->
                <el-icon v-if="sort" style="cursor: pointer" @click="delGrid1ListItem(element)"><CloseBold /></el-icon>
                <!-- 显示/收起 -->
                <div
                  class="btn"
                  v-else
                  @click="
                    element.show = !element.show;
                    updateGridList(1);
                  "
                >
                  <el-icon v-if="element.show"><Minus /></el-icon>
                  <el-icon v-else><Plus /></el-icon>
                </div>
              </div>
              <div v-if="element.show" style="min-height: 55px">
                <!-- 指派给我的请求 -->
                <RequestBox v-if="element.type == 'findRequest'"></RequestBox>
                <!-- 我待处理的任务 -->
                <PagePersonalTasksBox
                  v-if="element.type == 'findPagePersonalTasks'"
                  ref="pagePersonalTasksBox"
                ></PagePersonalTasksBox>
                <!-- 知识库统计 -->
                <KnowledgeStatisticsBox v-if="element.type == 'knowledgeStatistics'"></KnowledgeStatisticsBox>
                <!-- 热门知识 -->
                <PopularKnowledgeBox v-if="element.type == 'findPopularKnowledge'"></PopularKnowledgeBox>
                <!-- 最新知识 -->
                <KnowledgeListBox v-if="element.type == 'newKnowledge'"></KnowledgeListBox>
                <!-- 请求统计 -->
                <CountRequestBox v-if="element.type == 'countRequest'"></CountRequestBox>
                <!-- 公告栏 -->
                <AfficheBox v-if="element.type == 'affiche'"></AfficheBox>
                <!-- 流程任务统计 -->
                <CountRequestFlowTaskBox v-if="element.type == 'countRequestFlowTask'"></CountRequestFlowTaskBox>
              </div>
            </div>
          </template>
        </draggable>
      </div>
      <div class="right-box">
        <draggable
          class="grid-container"
          handle=".handle"
          v-model="grid2List"
          item-key="type"
          animation="300"
          chosen-class="chosen"
          group="people"
          @change="draggableChange"
        >
          <template #item="{ element }">
            <div class="item" :class="'item-' + element.type">
              <div class="item-title-box handle">
                <div class="item-title">{{ element.title }}</div>
                <!-- 移除模块 -->
                <el-icon v-if="sort" style="cursor: pointer" @click="delGrid2ListItem(element)"><CloseBold /></el-icon>
                <!-- 显示/收起 -->
                <div
                  class="btn"
                  v-else
                  @click="
                    element.show = !element.show;
                    updateGridList(2);
                  "
                >
                  <el-icon v-if="element.show"><Minus /></el-icon>
                  <el-icon v-else><Plus /></el-icon>
                </div>
              </div>
              <div v-if="element.show" style="min-height: 55px">
                <!-- 指派给我的请求 -->
                <RequestBox v-if="element.type == 'findRequest'"></RequestBox>
                <!-- 我待处理的任务 -->
                <PagePersonalTasksBox v-if="element.type == 'findPagePersonalTasks'"></PagePersonalTasksBox>
                <!-- 知识库统计 -->
                <KnowledgeStatisticsBox v-if="element.type == 'knowledgeStatistics'"></KnowledgeStatisticsBox>
                <!-- 热门知识 -->
                <PopularKnowledgeBox v-if="element.type == 'findPopularKnowledge'"></PopularKnowledgeBox>
                <!-- 最新知识 -->
                <KnowledgeListBox v-if="element.type == 'newKnowledge'"></KnowledgeListBox>
                <!-- 请求统计 -->
                <CountRequestBox v-if="element.type == 'countRequest'"></CountRequestBox>
                <!-- 公告栏 -->
                <AfficheBox v-if="element.type == 'affiche'"></AfficheBox>
                <!-- 流程任务统计 -->
                <CountRequestFlowTaskBox v-if="element.type == 'countRequestFlowTask'"></CountRequestFlowTaskBox>
              </div>
            </div>
          </template>
        </draggable>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="home">
import { computed, onMounted, ref } from "vue";
import draggable from "vuedraggable";
import RequestBox from "@/components/Index/RequestBox/index.vue";
import PagePersonalTasksBox from "@/components/Index/PagePersonalTasksBox/index.vue";
import PopularKnowledgeBox from "@/components/Index/Knowledge/PopularKnowledgeBox.vue";
import KnowledgeListBox from "@/components/Index/Knowledge/KnowledgeListBox.vue";
import CountRequestBox from "@/components/Index/CountRequestBox/index.vue";
import AfficheBox from "@/components/Index/AfficheBox/index.vue";
import CountRequestFlowTaskBox from "@/components/Index/CountRequestFlowTaskBox/index.vue";
import KnowledgeStatisticsBox from "@/components/Index/Knowledge/StatisticsBox.vue";
import { useI18n } from "vue-i18n";
import { getUserDepartment } from "@/api/modules/jggl";
const pagePersonalTasksBox = ref<InstanceType<typeof PagePersonalTasksBox>[]>([]);
const { t } = useI18n();
import { useGlobalStore } from "@/stores/modules/global";
const globalStore = useGlobalStore();

const sort = computed(() => {
  return globalStore.sort;
});
onMounted(() => {
  getUserDepartment();
});

const grid1List = ref<any[]>([]);
const grid2List = ref<any[]>([]);
if (localStorage.getItem("grid1List")) {
  grid1List.value = JSON.parse(localStorage.getItem("grid1List") || "[]");
  grid2List.value = JSON.parse(localStorage.getItem("grid2List") || "[]");
} else {
  grid1List.value = globalStore.gridList.slice(0, 3);
  grid2List.value = globalStore.gridList.slice(3, 8);
}

const dataArr = computed(() => {
  let types = [...grid1List.value, ...grid2List.value].map(item => {
    return item.type;
  });
  let arr = globalStore.gridList.filter(item => {
    return types.indexOf(item.type) < 0;
  });
  return arr;
});

const chooseItem = (item, index) => {
  grid1List.value = [...[item], ...grid1List.value];
};

const delGrid1ListItem = item => {
  let index = 0;
  grid1List.value.forEach((vo, idx) => {
    if (vo.type == item.type) {
      index = idx;
    }
  });
  grid1List.value.splice(index, 1);
};

const delGrid2ListItem = item => {
  let index = 0;
  grid2List.value.forEach((vo, idx) => {
    if (vo.type == item.type) {
      index = idx;
    }
  });
  grid2List.value.splice(index, 1);
};

// 完成首页布局
const onFinish = () => {
  globalStore.setSort(false);
  localStorage.setItem("grid1List", JSON.stringify(grid1List.value));
  localStorage.setItem("grid2List", JSON.stringify(grid2List.value));
};

const updateGridList = number => {
  setTimeout(() => {
    if (number == 1) {
      localStorage.setItem("grid1List", JSON.stringify(grid1List.value));
    } else {
      localStorage.setItem("grid2List", JSON.stringify(grid2List.value));
    }
  }, 100);
};

let timer;
const draggableChange = () => {
  clearTimeout(timer);
  timer = setTimeout(() => {
    clearTimeout(timer);
    if (!sort.value) {
      localStorage.setItem("grid1List", JSON.stringify(grid1List.value));
      localStorage.setItem("grid2List", JSON.stringify(grid2List.value));
    }
  }, 100);
};
</script>

<style scoped lang="scss">
.home {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
}
.header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  .tip_sort_box {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 332px;
    height: 44px;
    padding: 0 16px;
    margin-left: 15px;
    font-size: 14px;
    color: #ffffff;
    background: var(--el-color-primary);
    border-radius: 50px;
    .sort_finish {
      height: 30px;
      padding: 0 16px;
      margin-left: 15px;
      font-size: 14px;
      line-height: 30px;
      color: var(--el-color-primary);
      cursor: pointer;
      background-color: #ffffff;
      border-radius: 50px;
    }
  }
}
.grid-box {
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
  overflow: hidden;
  .left-box,
  .right-box {
    width: calc(50% - 5px);
    overflow: hidden;
  }
  .grid-container {
    width: 100%;
    min-height: 100%;
    .item {
      // min-height: 50px;
      margin-bottom: 10px;
      overflow: hidden;
      background-color: #ffffff;
      border: 1px solid #ffffff;
    }
    .chosen {
      border: 1px solid #111111 !important;
    }
    .item-title-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      cursor: move;
      border-bottom: 1px solid #e5e4e9;
      .item-title {
        height: 44px;
        font-size: 15px;
        line-height: 44px;
      }
      .btn {
        cursor: pointer;
      }
    }
  }
}
</style>
